<template>
  <div class="header">
    <h2>Privacy-Preserving In Video</h2>
    <div class="gitee">
      <n-icon size="25" @click="toVideo" style="margin-right: 10px">
        <VideoLogo />
      </n-icon>
      <n-icon size="25" @click="toGit">
        <Logo />
      </n-icon>
    </div>
  </div>
</template>

<script setup>
import { LogoGithub as Logo, LogoYoutube as VideoLogo } from '@vicons/ionicons5'

// 跳转至 Git 仓库
const toGit = () => {
  window.open('https://gitee.com/neal2021gitee/ppiv', '_blank')
}

// 跳转至演示视频
const toVideo = () => {
  window.open(
    'https://www.bilibili.com/video/BV1xB4y1U74Q?spm_id_from=333.999.0.0',
    '_blank'
  )
}
</script>

<style scoped>
.header {
  height: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}

.gitee {
  margin-left: auto;
  cursor: pointer;
}
</style>
